<template>
	<view :_autoFun="autoFun">
		<view class="update" v-if="is_update === true">
			<view class="update-box">
				<view class="up-img-box">
					<image class="up-img" :src="setting.app_wgt_bg?baseUrl + setting.app_wgt_bg:'/static/public/images/update.jpg'" mode="aspectFill"></image>
				</view>
				<view class="up-info">
					<view class="up-title">发现新版本：V<text>{{up_data.version}}</text></view>
				</view>
				<view class="btn-box" v-if="is_download === false">
					<button type="default" class="up-btn btn-cancel" :class="baseForm" @click="cancelUpdate">暂不更新</button>
					<button type="default" class="up-btn btn-confirm" :class="baseForm" @click="confirmUpdate">立即更新</button>
				</view>
				<view class="btn-box" v-else-if="is_download === true">
					<view class="progress-box" v-if="is_fail == false">
						<view class="progress-text">
							正在下载中：{{progress}} %
						</view>
						<view class="uni-padding-wrap uni-common-mt progress">
							<view class="progress-box">
								<progress :percent="progress" backgroundColor="#e3e3e3" stroke-width="4" />
							</view>
						</view>
					</view>
					<view v-else>
						<view class="progress-text red">
							下载失败
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vupdate",
		props: {
			from: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				baseUrl: this.config.cdnUrl,
				baseForm: 'shop',
				up_data:{
					update:false,
					wgtUrl:'',
					version:'',
					name:''
				},
				progress: 0,
				is_download: false,
				is_update: false,
				is_fail: false,
				setting: uni.getStorageSync('setting')
			};
		},
		computed:{
			autoFun(){
				if(uni.getStorageSync('is_update') == 1){
					this.update();
				}
			}
		},
		methods: {
			cancelUpdate:function(){
				this.is_update = false
				uni.removeStorageSync('is_update'); // 本次登录不更新
				if (this.setting.is_force == 1) {
					if (plus.os.name.toLowerCase() === 'android') {
						plus.runtime.quit();
					}else{ 
						const threadClass = plus.ios.importClass("NSThread");
						const mainThread = plus.ios.invoke(threadClass, "mainThread");
						plus.ios.invoke(mainThread, "exit");
					}
				}
			},
			confirmUpdate:function(){
				// #ifdef APP-PLUS
				let _this = this;
				_this.is_download = true;
				const downloadTask = uni.downloadFile({
					url: _this.config.baseUrl + _this.up_data.wgtUrl,  // 下载资源的 url
					success: (downloadResult) => {  
						if (downloadResult.statusCode === 200) {
							/* 安装应用, 要安装的文件路径(downloadResult.tempFilePath)
							force 是否强制安装
							true表示强制安装，不进行版本号的校验；false则需要版本号校验，
							如果将要安装应用的版本号不高                
							于现有应用的版本号则终止安装，并返回安装失败。 仅安装wgt和wgtu时生效，默认值 false。
							*/
							plus.runtime.install(downloadResult.tempFilePath, {
								force: true  
							}, function() {  
								uni.showModal({
									title: '提示',
									content: '更新完成，立即重启',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											plus.runtime.restart();
											console.log('安装成功','install success...'); 
										}
									}
								});	
									
								// 应用热重启，重新启动进入首页。
							}, function(e) {
								_this.is_fail = true
								uni.showToast({
								    title: '更新失败，请关闭app重试2',
								    duration: 2000,
									icon:'none'
								});
								return false;
							});								
						} else {
							_this.is_fail = true
							uni.showToast({
							    title: '更新失败，请关闭app重试',
							    duration: 2000,
								icon:'none'
							});
							return false;
						} 
					}  
				});
				
				downloadTask.onProgressUpdate((res) => {
					_this.progress = res.progress
					
				    // console.log('下载进度' + );
				    // console.log('已经下载的数据长度' + res.totalBytesWritten);
				    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				
				    // 测试条件，取消下载任务。
				    
				});
				// #endif
			},
			// 需要更新时，mainfest中的版本需要低于后台设置的版本
			update:function(){
				// #ifdef APP-PLUS
				let _this = this
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { 
					_this.$u.post('publics/api.update/index', {
						version: widgetInfo.version,
						name: widgetInfo.name
					}).then(res => {
						if (res.update && res.wgtUrl) {
							_this.up_data.update = res.update;
							_this.up_data.wgtUrl = res.wgtUrl;
							_this.up_data.version = res.version;
							_this.up_data.name = res.name;
							_this.is_update = true
						}  
					}) 
				});
				// #endif
			}
			// update:function(){
			// 	let _this = this
			// 		_this.$u.post('publics/api.update/index', {
			// 			version: '1.5.1',//widgetInfo.version,
			// 			name: '杭州汇创',//widgetInfo.name
			// 		}).then(res => {
			// 			console.log(res);
			// 			if (res.update && res.wgtUrl) {
			// 				_this.up_data.update = res.update;
			// 				_this.up_data.wgtUrl = res.wgtUrl;
			// 				_this.up_data.version = res.version;
			// 				_this.up_data.name = res.name;
			// 				_this.is_update = true
			// 			}  
			// 		})
			// }
		}
	}
</script>

<style lang="scss">
	.update{
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		height: 100%;
		z-index: 1000;
	}
	.update-box{
		position: absolute;
		transform: translate(-50%, -60%);
		top: 50%;
		left: 50%;
		width: 80%;
		background-color: #fff;
		/* height: 60%; */
		text-align: center;
		border-radius: 20rpx;
		padding: 50rpx 40rpx;
	}
	.btn-box{
		display: flex;
		justify-content: center;
		.up-btn{
			width: 43%;
			line-height: 70rpx;
			// height: 35px;
			// line-height: 35px;
			
			font-size: 30rpx;
		}
		.up-btn.basebForm{
			border: 1rpx solid $base-color;
		}
		.up-btn.baseForm{
			border: 1rpx solid $base-color;
		}
		
		.btn-cancel.basebForm{
			color: $base-color;
		}
		.btn-cancel.baseForm{
			color: $base-color;
		}
		.btn-confirm.basebForm{
			background-color: $base-color;
			color: #fff;
		}
		.btn-confirm.baseForm{
			background-color: $base-color;
			color: #fff;
		}
		.up-btn:after{
			display: none;
		}
	}
	.up-img-box{
		width: 100%;
		text-align: center;
		height: 400rpx;
		.up-img{
			width: 520rpx;
			height: 400rpx;
		}
	}
	.up-info{
		margin: 80rpx 0;
		.up-title{
			font-size: 40rpx;
			font-weight: 600;
		}
	}
	.progress-box{
		width: 100%;
	}
	.progress-text{
		font-size: 32rpx;
	}
	.progress{
		margin-top: 30rpx;
	}
</style>
